import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { getTool, relatedTools, allPublicSlugs } from "@/lib/public/queries";
import { renderMarkdown } from "@/lib/text";
import { label, fmtDate } from "@/lib/utils";
import { Badge } from "@/components/ui/badge";
import { LogoMark } from "@/components/ui/logo-mark";
import { Breadcrumbs } from "@/components/breadcrumbs";
import { ToolCard } from "@/components/tool-card";
import { ReportForm } from "@/components/report-form";
import { ExternalLink, BookOpen, GitBranch, Receipt, Scale, ShieldCheck, Lock, AlertTriangle, Check, Minus, Scale3D } from "lucide-react";
import { APP_URL } from "@/lib/env";

export const revalidate = 600;
export async function generateStaticParams() { try { return (await allPublicSlugs()).slice(0, 500).map((r) => ({ slug: r.slug })); } catch { return []; } }
export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
  const t = await getTool((await params).slug); if (!t) return { title: "Not found" };
  return { title: `${t.name} — ${t.summary.slice(0, 60)}`, description: t.summary, alternates: { canonical: `/tools/${t.slug}` }, openGraph: { title: t.name, description: t.summary, type: "article", url: `${APP_URL}/tools/${t.slug}` } };
}

function Section({ id, title, children }: { id: string; title: string; children: React.ReactNode }) {
  return <section id={id} aria-labelledby={`${id}-h`} className="scroll-mt-24"><h2 id={`${id}-h`} className="display h2 mb-3">{title}</h2>{children}</section>;
}
function List({ items, icon }: { items: string[]; icon?: "check" | "minus" }) {
  if (!items.length) return <p className="text-sm text-fg-3">Not documented.</p>;
  const I = icon === "minus" ? Minus : Check;
  return <ul className="grid gap-1.5 sm:grid-cols-2">{items.map((x) => <li key={x} className="flex items-start gap-2 text-[0.95rem] text-fg-2"><I className={`mt-1 h-4 w-4 shrink-0 ${icon === "minus" ? "text-warn" : "text-ok"}`} aria-hidden />{x}</li>)}</ul>;
}
function Row({ k, v }: { k: string; v: React.ReactNode }) { return <div className="border-t border-line py-2.5 first:border-t-0 first:pt-0"><dt className="mb-1 text-[11px] font-semibold uppercase tracking-wider text-fg-3">{k}</dt><dd className="flex flex-wrap gap-1.5 text-sm text-fg-2">{v}</dd></div>; }
const chips = (xs: string[]) => (xs.length ? xs.map((x) => <Badge key={x}>{label(x)}</Badge>) : <span className="text-fg-3">—</span>);

export default async function ToolPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const t = await getTool(slug); if (!t) notFound();
  const related = await relatedTools(t.id);
  const primary = t.categories.find((c) => c.isPrimary) ?? t.categories[0];
  const html = renderMarkdown(t.description);
  const links = [
    { href: t.homepageUrl, label: "Official site", icon: ExternalLink, field: "homepage_url" }, { href: t.docsUrl, label: "Documentation", icon: BookOpen, field: "docs_url" }, { href: t.repoUrl, label: "Repository", icon: GitBranch, field: "repo_url" },
    { href: t.pricingUrl, label: "Pricing", icon: Receipt, field: "pricing_url" }, { href: t.licenseUrl, label: "License", icon: Scale, field: "license_url" }, { href: t.privacyUrl, label: "Privacy policy", icon: Lock, field: "privacy_url" }, { href: t.securityUrl, label: "Security", icon: ShieldCheck, field: "security_url" },
  ].filter((l) => l.href);
  const lc = new Map(t.linkChecks.map((l) => [l.field, l]));
  const jsonLd = {
    "@context": "https://schema.org", "@type": "SoftwareApplication", name: t.name, url: t.homepageUrl, description: t.summary,
    ...(t.operatingSystems.length ? { operatingSystem: t.operatingSystems.map(label).join(", ") } : {}), ...(primary ? { applicationCategory: primary.name } : {}),
    ...(t.vendor ? { author: { "@type": "Organization", name: t.vendor.name, ...(t.vendor.websiteUrl ? { url: t.vendor.websiteUrl } : {}) } } : {}),
    ...(t.pricingModel.includes("free") || t.pricingModel.includes("open-source") ? { offers: { "@type": "Offer", price: "0", priceCurrency: "USD" } } : {}),
    ...(t.licenseSpdx && t.licenseUrl ? { license: t.licenseUrl } : {}),
  };
  const breadcrumbLd = { "@context": "https://schema.org", "@type": "BreadcrumbList", itemListElement: [{ "@type": "ListItem", position: 1, name: "Home", item: APP_URL }, ...(primary?.parent ? [{ "@type": "ListItem", position: 2, name: primary.parent.name, item: `${APP_URL}/categories/${primary.parent.slug}` }] : []), ...(primary ? [{ "@type": "ListItem", position: 3, name: primary.name, item: `${APP_URL}/categories/${primary.slug}` }] : []), { "@type": "ListItem", position: 4, name: t.name, item: `${APP_URL}/tools/${t.slug}` }] };

  return (
    <article className="mx-auto max-w-7xl px-4 py-8 sm:px-6">
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd).replace(/</g, "\\u003c") }} />
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbLd).replace(/</g, "\\u003c") }} />
      <Breadcrumbs items={[...(primary?.parent ? [{ href: `/categories/${primary.parent.slug}`, label: primary.parent.name }] : []), ...(primary ? [{ href: `/categories/${primary.slug}`, label: primary.name }] : []), { label: t.name }]} />

      <header className="mt-4 flex flex-col gap-5 md:flex-row md:items-start">
        <LogoMark name={t.name} size={72} className="rounded-2xl" />
        <div className="min-w-0 flex-1">
          <div className="flex flex-wrap items-center gap-2">
            <h1 className="display h1">{t.name}</h1>
            {t.depth === "deep" && <Badge tone="accent">In-depth entry</Badge>}
            {t.productStatus !== "active" && <Badge tone={t.productStatus === "unknown" ? "warn" : "bad"}>{label(t.productStatus)}</Badge>}
          </div>
          <p className="mt-1 text-sm text-fg-3">{t.vendor ? <>by {t.vendor.websiteUrl ? <a href={t.vendor.websiteUrl} rel="noopener noreferrer nofollow" target="_blank" className="hover:text-fg">{t.vendor.name}</a> : t.vendor.name} · </> : null}{label(t.productType)}{t.aliases.length ? <> · also known as {t.aliases.join(", ")}</> : null}</p>
          <p className="mt-3 max-w-3xl text-lg leading-snug text-fg-2">{t.summary}</p>
          <div className="mt-4 flex flex-wrap gap-1.5">
            <Badge tone={t.sourceModel === "open-source" ? "ok" : "neutral"} title="Source model / license">{t.licenseSpdx ? `${t.licenseSpdx} license` : label(t.sourceModel)}</Badge>
            {t.pricingModel.map((p) => <Badge key={p} title="Pricing model (no prices are recorded)">{label(p)}</Badge>)}
            {t.executionModes.map((e) => <Badge key={e} tone="info">{label(e)}</Badge>)}
            {t.selfHostable && <Badge tone="info">Self-hostable</Badge>}
          </div>
        </div>
        <div className="flex shrink-0 flex-col gap-2 md:w-60">
          <a href={t.homepageUrl} rel="noopener noreferrer" target="_blank" className="btn-primary">Visit official site <ExternalLink className="h-4 w-4" aria-hidden /></a>
          <Link href={`/compare?tools=${t.slug}`} className="btn-ghost" rel="nofollow" aria-label={`Compare ${t.name} with other tools`}><Scale3D className="h-4 w-4" aria-hidden /> Compare</Link>
          <p className="text-center text-[11px] text-fg-3">{lc.get("homepage_url")?.ok ? <>Link verified {fmtDate(lc.get("homepage_url")!.checkedAt)}</> : t.checkedAt ? <>Checked {fmtDate(t.checkedAt)}</> : "Link check pending"}</p>
        </div>
      </header>

      <div className="mt-10 grid gap-10 lg:grid-cols-[1fr_20rem]">
        <div className="space-y-12">
          <Section id="overview" title="Overview">
            <div className="prose-tool" dangerouslySetInnerHTML={{ __html: html }} />
            {t.uncertaintyNote && <p className="mt-4 flex items-start gap-2 rounded-xl border border-warn/30 bg-warn/10 p-3 text-sm text-fg-2"><AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-warn" aria-hidden /><span><strong className="text-fg">Editorial note on uncertainty.</strong> {t.uncertaintyNote}</span></p>}
          </Section>
          <Section id="capabilities" title="Capabilities"><List items={t.capabilities} /></Section>
          {t.workflows.length > 0 && <Section id="workflows" title="Typical workflows"><ol className="list-decimal space-y-1.5 pl-5 text-[0.95rem] text-fg-2">{t.workflows.map((w) => <li key={w}>{w}</li>)}</ol></Section>}
          <div className="grid gap-8 md:grid-cols-2">
            <Section id="advantages" title="Strengths"><List items={t.advantages} /></Section>
            <Section id="limitations" title="Limitations"><List items={t.limitations} icon="minus" /></Section>
          </div>
          {(t.prerequisites.length > 0 || t.audiences.length > 0) && (
            <div className="grid gap-8 md:grid-cols-2">
              {t.prerequisites.length > 0 && <Section id="prerequisites" title="Prerequisites"><List items={t.prerequisites} /></Section>}
              {t.audiences.length > 0 && <Section id="audiences" title="Who it is for"><List items={t.audiences} /></Section>}
            </div>
          )}
          {(t.alternatives.length > 0 || t.comparisonNotes) && (
            <Section id="alternatives" title="Alternatives & comparison">
              {t.comparisonNotes && <p className="prose-tool mb-4">{t.comparisonNotes}</p>}
              {t.alternatives.length > 0 && (
                <ul className="grid gap-2 sm:grid-cols-2">{t.alternatives.map((a) => (
                  <li key={a.slug} className="card p-3"><Link href={`/tools/${a.slug}`} className="font-medium hover:text-accent">{a.name}</Link><p className="mt-0.5 line-clamp-2 text-xs text-fg-3">{a.summary}</p><div className="mt-1.5 flex gap-1"><Badge>{label(a.sourceModel)}</Badge>{a.pricingModel.slice(0, 1).map((p) => <Badge key={p}>{label(p)}</Badge>)}</div></li>
                ))}</ul>
              )}
              {t.alternatives.length > 1 && <Link href={`/compare?tools=${[t.slug, ...t.alternatives.slice(0, 3).map((a) => a.slug)].join(",")}`} rel="nofollow" className="mt-3 inline-flex items-center gap-1 text-sm text-accent hover:underline">Compare {t.name} with its alternatives →</Link>}
            </Section>
          )}
          <Section id="sources" title="Sources & verification">
            <p className="mb-3 text-sm text-fg-2">Primary sources consulted for this record. Claims are tied to the fields each source supports; the automated link checker re-verifies every URL on a schedule.</p>
            <ul className="divide-y divide-line rounded-2xl border border-line bg-bg-2">
              {t.sources.map((s) => (
                <li key={s.url} className="flex flex-col gap-1 p-3 sm:flex-row sm:items-start sm:gap-3">
                  <Badge className="shrink-0">{label(s.sourceType)}</Badge>
                  <div className="min-w-0 flex-1"><a href={s.url} rel="noopener noreferrer nofollow" target="_blank" className="break-all text-sm text-accent hover:underline">{s.title ?? s.url}</a>{s.title && <p className="truncate text-xs text-fg-3">{s.url}</p>}{s.supports.length > 0 && <p className="mt-1 text-xs text-fg-3">Supports: {s.supports.join(", ")}</p>}{s.note && <p className="mt-1 text-xs text-fg-2">{s.note}</p>}</div>
                  <span className="shrink-0 text-xs text-fg-3">checked {fmtDate(s.checkedAt)}</span>
                </li>
              ))}
            </ul>
            <dl className="mt-4 grid gap-2 text-sm sm:grid-cols-3">
              <div className="rounded-xl bg-bg-3/60 p-3"><dt className="eyebrow">Confidence</dt><dd className="mt-1 font-medium">{label(t.confidence)}</dd></div>
              <div className="rounded-xl bg-bg-3/60 p-3"><dt className="eyebrow">Reviewed</dt><dd className="mt-1 font-medium">{fmtDate(t.reviewedAt ?? t.publishedAt)}</dd></div>
              <div className="rounded-xl bg-bg-3/60 p-3"><dt className="eyebrow">Links</dt><dd className="mt-1 font-medium">{label(t.linkState)}{t.checkedAt ? ` · ${fmtDate(t.checkedAt)}` : ""}</dd></div>
            </dl>
          </Section>
          <Section id="report" title="Spotted an error?"><ReportForm slug={t.slug} /></Section>
        </div>

        <aside className="space-y-6 lg:sticky lg:top-20 lg:self-start" aria-label="Facts and links">
          <div className="card p-4">
            <h2 className="eyebrow mb-2">Official links</h2>
            <ul className="space-y-1">{links.map((l) => { const c = lc.get(l.field); return (
              <li key={l.field}><a href={l.href!} rel="noopener noreferrer nofollow" target="_blank" className="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-fg-2 hover:bg-bg-3 hover:text-fg"><l.icon className="h-4 w-4 shrink-0 text-fg-3" aria-hidden />{l.label}<span className="ml-auto" title={c ? (c.ok ? `OK ${c.statusCode ?? ""}` : `Problem ${c.statusCode ?? ""}`) : "not yet checked"}>{c ? <span className={`block h-1.5 w-1.5 rounded-full ${c.ok ? "bg-ok" : "bg-bad"}`} aria-label={c.ok ? "link verified" : "link problem"} /> : null}</span></a></li>
            ); })}</ul>
          </div>
          <div className="card p-4">
            <h2 className="eyebrow mb-1">Facts</h2>
            <dl>
              <Row k="Categories" v={t.categories.map((c) => <Link key={c.slug} href={`/categories/${c.slug}`} className="chip hover:border-accent/40 hover:text-accent" title={c.label ?? undefined}>{c.name}</Link>)} />
              <Row k="Runs" v={chips(t.executionModes)} />
              <Row k="Interfaces" v={chips(t.interfaces)} />
              <Row k="Operating systems" v={chips(t.operatingSystems)} />
              {t.deploymentModels.length > 0 && <Row k="Deployment" v={chips(t.deploymentModels)} />}
              <Row k="Source model" v={<span>{label(t.sourceModel)}{t.licenseSpdx ? ` · ${t.licenseSpdx}` : ""}</span>} />
              <Row k="Pricing model" v={<span>{t.pricingModel.map(label).join(", ")}{t.pricingCheckedAt ? <span className="block text-xs text-fg-3">checked {fmtDate(t.pricingCheckedAt)}</span> : null}</span>} />
              <Row k="Self-hostable" v={t.selfHostable === null ? "Unknown" : t.selfHostable ? "Yes" : "No"} />
              {t.languages.length > 0 && <Row k="Languages" v={chips(t.languages)} />}
              {t.dataFormats.length > 0 && <Row k="Data formats" v={chips(t.dataFormats)} />}
              {t.integrations.length > 0 && <Row k="Integrations" v={chips(t.integrations)} />}
              {t.privacyPosture && <Row k="Privacy posture" v={<span>{t.privacyPosture}</span>} />}
              {t.dataResidency && <Row k="Data residency" v={<span>{t.dataResidency}</span>} />}
            </dl>
          </div>
          {(t.tags.length > 0 || t.useCases.length > 0) && (
            <div className="card p-4">
              <h2 className="eyebrow mb-2">Tags & use cases</h2>
              <div className="flex flex-wrap gap-1.5">{t.useCases.map((u) => <Link key={u.slug} href={`/tools?use=${u.slug}`} rel="nofollow" className="chip chip-accent">{u.name}</Link>)}{t.tags.map((g) => <Link key={g.slug} href={`/tools?tag=${g.slug}`} rel="nofollow" className="chip">#{g.slug}</Link>)}</div>
            </div>
          )}
          {t.collections.length > 0 && <div className="card p-4"><h2 className="eyebrow mb-2">In collections</h2><ul className="space-y-1 text-sm">{t.collections.map((c) => <li key={c.slug}><Link href={`/collections/${c.slug}`} className="text-accent hover:underline">{c.title}</Link></li>)}</ul></div>}
        </aside>
      </div>

      {related.length > 0 && (
        <section className="mt-16" aria-labelledby="related-h">
          <h2 id="related-h" className="display h2 mb-4">More in {primary?.name ?? "this category"}</h2>
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">{related.map((r) => <ToolCard key={r.id} t={r} />)}</div>
        </section>
      )}
    </article>
  );
}